<template>
  <div class="wrapper">
    <div class="mb-3 d-flex align-items-center">
      选择日期：
      <el-date-picker v-model="time" size="small" class="w250"  type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期"  @change="query"></el-date-picker>
      <el-button slot="append" class="ur-btn ur-btn-primary ml-2" @click="query"><i class="iconfont icon-sousuo"></i>查询</el-button>
    </div>
    <el-table :data="tableData" tooltip-effect="dark" :height="300" highlight-current-row>
      <el-table-column prop="Date" label="日期" width="150" align="center">
        <template slot-scope="scope">
          {{formatDate(scope.row.Date)}}
        </template>
      </el-table-column>
      <el-table-column prop="Hours" label="在线时长(时)"align="center">
        <template slot-scope="scope">
          {{Math.round(scope.row.Hours)}}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import api from 'api/api'

  export default {
    components: {},
    props: {
      devAddr:null
    },
    data() {
      return {
        tableData:[],
        time:null
      }
    },
    watch: {},
    computed: {},
    methods: {
      formatDate(time){
        return api.formatDate(time)
      },
      query(){
        api.fetchSimple('/Monitor/QueryRtuOnlineTime',{devAddr:this.devAddr,sdate:this.time[0],edate:this.time[1]})
          .then(r=>{
            this.tableData = r.data
          })
      }
    },
    created() {
      this.time= api.getMonthTime()
      this.query()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
